<!DOCTYPE html>
<html lang="en">

<head>
<title>规则配置列表</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
<script src="../js/handsontable/handsontable.full.min.js"></script>
<script src="../js/handsontable/jquery.min.js"></script>
<script src="../js/handsontable/xlsx.full.min.js"></script>
<style type="text/css">
.layui-badge-dot {
    width: 18px;
    height: 18px;
}
</style>
</head>

<body>
  <div id="content">
      <div style="padding: 20px; background-color: #F2F2F2;">
          <div class="layui-row layui-col-space15">
              <div class="layui-col-md12">
                  <div class="layui-card">
                      <div class="layui-card-header">规则配置列表</div>
                      <div class="layui-card-body">
                        <table class="layui-hide" id="test" lay-filter="test"></table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <!--js-->
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addRule">添加规则</button>
      <button class="layui-btn layui-btn-sm" lay-event="delRule">删除规则</button>
    </div>
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="showRule">详情</a>
    <input type="checkbox" name="switch" lay-skin="switch" checked="{{d.enable}}" lay-text="启用|禁用" lay-filter="autoplay">
  </script>

  <div class="site-text" style="margin: 5%; display: none" id="window"  target="test123">	
    <form class="layui-form" id="book" method="post" lay-filter="formRule" action="ruleConfiguration_edit.html">
      <div class="layui-form-item">
        <label class="layui-form-label">报表</label>
        <div class="layui-input-block">
          <select name="reportId" lay-verify="required">
            <option value=""></option>
            <option value="AY01">A报表</option>
            <option value="AY02">B报表</option>
            <option value="AY03">C报表</option>
            <option value="AY04">D报表</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">规则名</label>
        <div class="layui-input-block">
          <input type="text" id="bid" name="ruleName" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
          <input type="text" id="bname" name="description" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即添加</button>
        </div>
      </div>
    </form>
  </div>

  <script src="../js/layui/layui.js" charset="utf-8"></script>

  <script type="text/javascript">
    var RULE_TYPE = {
      "1" : "行级", "2" : "列级", "3" : "表级"
    }
    layui.use('table', function() {
      var table = layui.table;
      table.render({
        elem : '#test',
        toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
        defaultToolbar : [ 'filter', 'exports' ],
        title : '用户数据表',
        page : true,
        cols : [ [ {
          title : '操作',
          toolbar : '#barDemo',
          fixed : 'right',
          width : 150
        }, {
          type : 'checkbox'
        }, {
          field : 'reportName',
          title : '报表名称',
          width : 200,
          sort : true
        }, {
          field : 'ruleName',
          title : '规则名称',
          width : 200,
          align : 'center'
        }, {
          field : 'description',
          title : '规则描述'
        }, {
          field : 'type',
          title : '规则级别',
          width : 100,
          templet: function(res) {
              return RULE_TYPE[res.type]
          }
        }, {
          field : 'date',
          title : '更新日期',
          width : 100
        }
        ] ],
        data : [ {
          ruleId : "R001",
          ruleName : "A报表校验规则1",
          description : "名称不可为空",
          reportId : "AY01",
          reportName : "A报表", // linkdata
          type : "1", // 1-row,2-col,3-table
          targetNames : "name",
          enable : true,
          expression : null
        }, {
          ruleId : "R002",
          ruleName : "A报表校验规则2",
          description : "叫‘张三8’的人，年龄不能大于25",
          reportId : "AY01",
          reportName : "A报表", // linkdata
          type : "1", // 1-row,2-col,3-table
          targetNames : "name,age",
          enable : false,
          expression : null
        } ]
      });
      //头工具栏事件
      table.on('toolbar(test)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
        case 'addRule':
          layer.open({
            area : ["700px","400px"],
            type : 1,
            title : "添加规则的初始属性",
            content: $('#window') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
          });
          break;
        case 'delRule':
          var data = checkStatus.data;
          if (data.length == 0) {
            layer.msg("请选择要删除的数据");
          } else {
            // TODO
          }
          break;
        }
      });
      //监听行工具事件
      table.on('tool(test)', function(obj) {
        var data = obj.data;
        if (obj.event === 'showRule') {
          location.href="ruleConfiguration_edit.html";
        }
      });
    });
    layui.use(['layer','form'], function(){
      var form = layui.form;
      
      //监听提交
      form.on('submit(formRule)', function(data){
        
        console.log(data)
        return true;
      });
    });
  </script>
</body>

</html>